<template>
  <div id="app">
    <Nav />
    <List />
    我的年龄{{ myAge }}
    <button @click="$store.commit('changeAge', 10)">同步mutations</button>
    <button @click="$store.dispatch('changeAgeSet', -5)">异步actions</button>
    <div>
      模块A{{ $store.state.a.name
      }}<button @click="$store.commit('a/changeName', '111')">A模块</button>
    </div>
    <div>
      模块B{{ $store.state.b.name
      }}<button @click="$store.commit('b/changeName', '222')">B模块</button>
    </div>
    <div>
      模块C{{ $store.state.a.c.name
      }}<button @click="$store.commit('a/c/changeName', '333')">C模块</button>
    </div>
  </div>
</template>

<script>
import List from "./components/List";
import Nav from "./components/Nav";
import { mapState, mapGetters } from "../vuex/index";
export default {
  name: "app",
  data() {
    return {

    };
  },
  components: {
    List,
    Nav,
  },
  computed: {
    ...mapGetters(['myAge','navIdx'])
  },
  mounted() {

  },
  methods: {
    changeIdx(index) {
      this.navIdx = index;
    },
  },
};
</script>

<style>
#app {
}
</style>
